<template>
  <div class="tab">
    <tab-item class="" v-for="item in tabData" :key='item.title' :item='item'></tab-item>
  </div>
</template>
<script>
import TabItem from './TabItem'
export default {
  data () {
    return {
      value: 'film'
    }
  },
  props: {
    tabData: Array,
    currentTab: String
  },
  watch: {
    currentTab (newVal, old) {
      this.value = this.currentTab
    },
    value (newVal, old) {
      if (newVal !== old) {
        this.$emit('changeIndex', newVal)
      }
    }
  },
  mounted () {
    this.value = this.currentTab
  },
  components: {
    TabItem
  }
}
</script>
<style lang="scss">
.tab{
  display: flex;
  flex-direction: row;
}
</style>
